<template>
 <div>
<van-nav-bar
  title="修改收货地址" :fixed="true" left-arrow @click-left="onClickLeft"
/>
<van-address-edit
  :area-list="areaList"
  :address-info="addressInfo"
  show-delete
  show-set-default
  :columns-placeholder="defaultArea"
  show-search-result
  :search-result="searchResult"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
  @change-area = "onChangeArea"
/>
<input readonly="readonly" class="address" type="text" v-model="regions">
 </div>
</template>

<script>
import * as api from '@/api/address'
let areaObj = {
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '县',
    120100: '天津市',
    120200: '县'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区',
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
  }
}
export default {
    name:'EditAddress',
    
    data(){
        return{
         searchResult: [],
         areaList:areaObj,
         addressInfo:{},
         defaultArea:'',
         regions:'',
        }
    },
    methods:{
        onSave(content) {
            console.log(content)
            api.updateAddress({
                id:this.$route.params.id,
                receiver:content.name,
                mobile:content.tel,
                regions:`${content.province}-${content.city}-${content.county}`,
                address:content.addressDetail,
                idDefault:this.idDefault,
         }).then(data=>{
             console.log(data)
             this.$router.go(-1)
         })
        },
        onDelete() {
          console.log(this.$route.params.id)
          let id=this.$route.params.id
            api.delateAddress(id).then(data=>{
              console.log(data)
            })
        },
        onClickLeft(){
            this.$router.go(-1)
        },
        onChangeDetail(val) {
          if (val) {
            this.searchResult = [{
              name: '黄龙万科中心',
              address: '杭州市西湖区'
            }];
          } else {
            this.searchResult = [];
          }
        },
        onChangeArea(value){
            console.log(value)
            let str = ''
            let arr = []
            value.map(v=>{
                if(arr.indexOf(v.name)===-1){
                    arr.push(v.name)
                }
                console.log(arr)
            })
            this.regions = arr.join('/')
        }
    },
    mounted(){
        api.oneAddress(this.$route.params.id).then(data=>{

            let address = data.data
            let areas = address.regions.split('-');
            let newArr = []
            areas.map(v=>{
                if(newArr.indexOf(v)===-1){
                    newArr.push(v)
                }
            })
            let obj ={
                name:address.receiver,
                tel:address.mobile,
                addressDetail :address.address,
                province:areas[0],
                city:areas[1],
                county:areas[2]
            }
            
            this.regions = newArr.join('/')
            this.addressInfo = obj
        })
    }
}

</script>

<style scoped>
.van-address-edit{
    margin-top:44px;
}
.address{
    position: absolute;
    border:0;
    top:0;
    z-index:10;
    top:144px;
    left:106px;
    width:100px;
}
</style>